<template>
  <div class="detail wd1200">
    <div class="info">
      <p class="name">{{ companyName }}</p>
      <div class="info-s">
        <!-- <p class="aa">
          <span>所属区域：{{ companyInfo.ssqy }}</span>
          <span>地址：<i class="el-icon-location-outline" />{{ companyInfo.dz }}</span>
        </p> -->
        <p>所属区域：
          {{ companyInfo.district }}{{ companyInfo.street }}{{ companyInfo.community }}
        </p>
      </div>
    </div>
    <div class="tips">
      <img src="../../../assets/images/busNeighbors/alert.png" alt="">
      <span class="tit">变更提醒</span>
      <marquee id="marquee" v-if="warnings.length" align="middle" @mouseover="marqueeMove()" @mouseleave="marqueeOut()"><span class="instr"><span>当月工商变更企业
        <b @click="e => toDetails(e, '当月工商变更企业', 'company_change_com_list', {
          endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
          lyId: Number(this.$route.query.id),
          pageNumber: 1,
          pageSize: 10,
          startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
        })">{{ warnings[0] }}</b> 家</span>，<span>当月经营风险企业
        <b @click="e => toDetails(e, '当月经营风险企业', 'build_company_sffx_list', {
            endDate: $dayjs().endOf('month').format('YYYY-MM-DD'),
            lyComType:5,
            lyId:Number(this.$route.query.id),
            pageNumber:1,
            pageSize:10,
            shpId:Number(this.$route.query.id),
            startDate: $dayjs().startOf('month').format('YYYY-MM-DD')})">{{ warnings[1] }}</b> 家</span>，<span>当月司法风险企业
        <b @click="e => toDetails(e, '当月司法风险企业', 'build_company_sffx_list', {
          endDate: $dayjs().endOf('month').format('YYYY-MM-DD'),
          lyComType:5,
          lyId: Number(this.$route.query.id),
          pageNumber:1,
          pageSize:10,
          shpId: Number(this.$route.query.id),
          startDate:$dayjs().startOf('month').format('YYYY-MM-DD')
        })">{{ warnings[2] }}</b> 家</span></span></marquee>
    </div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="存量企业" name="1">
        <v-existing v-show="activeName === '1'" />
      </el-tab-pane>
      <el-tab-pane label="变量企业" name="2">
        <v-variable v-show="activeName === '2'" />
      </el-tab-pane>
      <el-tab-pane label="企业培育" name="3">
        <v-train v-show="activeName === '3'" />
      </el-tab-pane>
      <el-tab-pane label="创新发展" name="4">
        <v-innovation v-show="activeName === '4'" />
      </el-tab-pane>
      <el-tab-pane label="开放发展" name="5">
        <v-open v-show="activeName === '5'" />
      </el-tab-pane>
      <el-tab-pane label="发展风险" name="6">
        <v-risk v-show="activeName === '6'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import vExisting from './existing'
import vVariable from './variable'
import vTrain from './train'
import vInnovation from './innovation'
import vOpen from './open'
import vRisk from './risk'
import { company_change_com_count, build_company_jyfx_count, build_company_sffx_count, ly_info, company_change_com_list } from '@/api/busNeighbors'
export default {
  name: 'BusNeighborsDetail',
  filters: {},
  components: {
    vExisting, vVariable, vTrain, vInnovation, vOpen, vRisk
  },
  data() {
    return {
      activeName: '1',
      warnings: [],
      companyInfo: {
        district: '',
        street: '',
        community: ''
      },
      companyName: ''
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.companyName = this.$route.query.name
    // this.companyName = '保利·天悦'
    const res = await ly_info({ id: Number(this.$route.query.id) })
    this.companyInfo = res.data && res.data.content[0]
    this.activeName = '1'
    console.log(this.activeName)
  },
  async mounted() {
    Promise.all([
      await company_change_com_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        lyComType: 5,
        lyId: Number(this.$route.query.id),
        startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
      }),
      await build_company_jyfx_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
      }),
      await build_company_sffx_count({
        endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
        shpId: Number(this.$route.query.id),
        startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
      })
    ]).then(res => {
      res.forEach((item, index) => {
        this.$set(this.warnings, index, item.data && (item.data.content[0].total || item.data.content[0].count) || 0)
      })
      console.log(this.warnings)
    })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
      this.$store.commit('bus/SET_TABACTIVE', String(Number(tab.index) + 1))
    },
    toDetails(e, title, api, params) {
      let searchApi = null
      if (title === '当月工商变更企业') {
        searchApi = [{
          api: 'company_change_com_count_chart',
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyId: Number(this.$route.query.id),
            startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
          }
        }, {
          api: 'company_change_com_count_year',
          exProperty: 'establishRange',
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            lyId: Number(this.$route.query.id),
            startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
          }
        }]
      } else if (title === '当月司法风险企业') {
        searchApi = [{
          api: 'build_company_sffx__chart',
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            shpId: Number(this.$route.query.id),
            startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
          }
        }, {
          api: 'build_company_sffx_year_count',
          params: {
            endDate: this.$dayjs().endOf('month').format('YYYY-MM-DD'),
            shpId: Number(this.$route.query.id),
            startDate: this.$dayjs().startOf('month').format('YYYY-MM-DD')
          }
        }]
      }
      e.stopPropagation()
      this.$router.push({ path: '/bus-neighbors/list', query: { data: JSON.stringify({
        title,
        api,
        url: '/bus-neighbors/list',
        searchApi: searchApi,
        params
      }), companyNames: this.$route.query.name }})
    },
    marqueeMove() {
      var marquee = document.getElementById('marquee')
      marquee.stop()
      this.showCarCloseBtn = true  //显示关闭按钮
    },
    marqueeOut() {
      var marquee = document.getElementById('marquee')
      marquee.start()
      this.showCarCloseBtn = false  //隐藏关闭按钮
    },
  }
}
</script>
<style lang="scss" scoped>
.detail{
  padding: 20px 0;
  marquee {
    scrollamount: 2; /* 设置滚动速度 */
  }
  .info{
    background: url(../../../assets/images/busNeighbors/info.png) no-repeat;
    background-size: 100% 100%;
    padding: 14px;
    .name{
      font-size: 24px;
      font-weight: bold;
      color: #3360D7;
      margin: 0;
      margin-bottom: 20px;
    }
    &-s{
      background-color: #fff;
      border-radius: 4px;
      padding: 0 14px;
      p{
        margin: 0;
        font-size: 13px;
        height: 40px;
        line-height: 40px;
        color: #222222;
      }
      .aa{
        display: flex;
        border-bottom: 1px solid #E6E6E6;
        span{
          flex: 1;
        }
      }
    }
  }
  .tips{
    height: 70px;
    line-height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    img{
      width: 30px;
      height: 30px;
      margin-right: 10px;
      vertical-align: middle;
    }
    .tit{
      font-size: 15px;
      font-weight: bold;
      color: #FA9417;
      margin-right: 20px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      letter-spacing: 1px;
      position: relative;
      top: -1px;
    }
    .instr{
      flex: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      b{
        color: #FF8C1A;
      }
    }
    span{
      white-space: nowrap;
      font-size: 13px;
      color: #222222;
    }
  }
  ::v-deep .el-tabs__nav{
    display: flex;
    width: 100%;
    background: #EDF1F5;
  }
  ::v-deep .el-tabs__item{
    flex: 1;
    text-align: center;
    border-left: none;
    color: #000000;
    font-weight: bold;
    font-family: Microsoft YaHei, Microsoft YaHei;
  }
  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active{
    background: linear-gradient( 90deg, #0071DF 0%, #5E99EC 100%, #649CED 100%);
    color: #fff;
  }
}
</style>
